<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	
<html>	
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Tutorial: HelloWorld</title>
	<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
	<script type="text/javascript" src="common.js" ></script>
	<script type="text/javascript" src="graph.js" ></script>
	<script type="text/javascript" src="test.js" ></script>
	<style>
	#demo {
    height: 200px;
}

	</style>
	
  </head>
  <body>
    <h1>HelloWorld Tutorial</h1>


        <div id="graphPool">
            <div id="dd-demo-1" class="dd-demo"><div>1</div></div>
            <div id="dd-demo-2" class="dd-demo"><div>2</div></div>
            <div id="dd-demo-3" class="dd-demo"><div>3</div></div>
        </div>



	<style>
.dd-demo {
    position: relative;
    text-align: center;
    color: #fff;
    cursor: move;
    height: 60px;
    width: 60px;
    padding: 0;
    margin: 0;
}
 
.dd-demo div {
    border: 1px solid black;
    height: 58px;
    width: 58px;
}
 
#graphPool {
    padding: 15px;
    background-color: #8DD5E7;
    border: 1px solid black;
}
 
 
#dd-demo-3 {
    background-color: #004C6D;
    top:-100px;
    left:200px;
}
	</style>
	<button type="button" id="make">Add More</button>s
	<script>

YUI().use('dd-constrain', function(Y) {
    var dd1 = new Y.DD.Drag({
        node: '#dd-demo-1'
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#graphPool'
    });
 
    var dd2 = new Y.DD.Drag({
        node: '#dd-demo-2'
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#graphPool'
    });
 
    var dd3 = new Y.DD.Drag({
        node: '#dd-demo-3'
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#graphPool'
    });
	
	
});
YUI().use('dd-delegate', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#graphPool',
        nodes: 'div'
	}).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#graphPool'
   });
 

Y.one('#make').on('click', function(e) {
    var graphPool = Y.one('#graphPool');
    for (var i = 1; i < 11; i++) {
       
		graphPool.append('<div id= "dd-demo- #' + i + '" class="dd-demo"><div>' + i + '</div></div>');
		   
		                    		
    }
    });
 });
		</script>

<p>
	balsfdlafdlsf
</p>    
    
  </body>
</html>